<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/login.css">
    <%@ include file="style.jsp" %>
</head>

<body>
<%@ include file="start.jsp" %>
<!--  导航 end -->
<%@ include file="header.jsp" %>

<div class="layui-container login_box" style="width: 840px;margin-top: 25px;">
    <div class="layui-row">
        <div class="layui-panel box">
            <div class="layui-col-md5 desc">
                <h1>省心 极致 低价</h1>
                <p>一流品质，超级好货，便宜实惠</p>
            </div>
            <div class="layui-col-md7 content">
                <div class="login-title">
                    <h4 style="margin:35px 0 20px 45px;">注册</h4>
                </div>
                <div class="login-panel ">
                    <form class="layui-form" action="register" method="post">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-block">
                                <input type="text" name="username"  lay-verify="required|username"
                                       placeholder="请输入用户名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-inline">
                                <input type="password" name="PASSWORD"  lay-verify="required|password"
                                       placeholder="请输入密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">确认密码</label>
                            <div class="layui-input-inline">
                                <input type="password" name="password2"  lay-verify="password2"
                                       placeholder="请确认密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-block">
                                <label>
                                    <select name="gender" lay-verify="sex">
                                        <option value=""></option>
                                        <option value="男">男</option>
                                        <option value="女">女</option>
                                    </select>
                                </label>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">邮箱</label>
                            <div class="layui-input-inline">
                                <label>
                                    <input type="email" name="text" lay-verify="required|email" placeholder="请输入邮箱"
                                           autocomplete="off" class="layui-input">
                                </label>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">电话</label>
                            <div class="layui-input-inline">
                                <label>
                                    <input type="tel" name="telephone" lay-verify="phone"
                                           placeholder="请输入手机号(非必填)" autocomplete="off" class="layui-input">
                                </label>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit>注册</button>
                            </div>
                        </div>
                    </form>
                    <script>
                        layui.use('form', function () {
                            const form = layui.form;
                            //监听提交
                            form.verify({
                                username: function (value, item) {
                                    console.log(value)
                                    if (value.length === 0) return '请填写用户名'
                                    if (value.length <= 4) return '用户名长度不能小于4位'
                                    if (!new RegExp("^[0-9a-zA-Z_]+$").test(value)) return '用户名不能有特殊字符';
                                    if (/^\d+\d+\d$/.test(value)) return '用户名不能全为数字';
                                }
                                , password: function (value, item) {
                                    if (value.length === 0) return '请输入密码'
                                    if (value.length <= 4) return '密码不能小于4位数'
                                    if (!new RegExp("^[a-zA-Z0-9_\s]+$").test(value)) return '密码不能有特殊字符';
                                    if (/^\d+\d+\d$/.test(value)) return '密码不能全为数字';
                                },
                                password2: function (value, item) {
                                    if (value.length === 0) return '请输入二次密码'
                                    if (document.getElementsByName('PASSWORD')[0].value !== value) return '请确认二次密码是否相同'
                                },
                                sex: function (value, item) {
                                    if(value.length === 0){
                                        return '请选择性别'
                                    }
                                }
                            });
                        });
                    </script>

                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>